<template>
  <div class="emoji">
    <ul class="emoji-default">
      <li
        v-for="(item, index) in emojiTab[emojiTabCurrent].items"
        :key="index"
        @click.stop="chooseEmojiDefault(index)"
      >
        <div v-html="parsingEmoji(index.indexOf('[')>-1 ? index : '[' + index + ']')" :data-name="item"></div>
      </li>
    </ul>
    <div class="emoji-tabs">
      <div class="emoji-tab " :class="emojiTabCurrent == index ?'current':''" @click="emojiTabCurrent = index" v-for="(item,index) in emojiTab" :key="index">
        <div v-html="parsingEmoji(item.title)"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  emojisAmap,
  wChatToUi,
} from "./emjoydata";

import "@/components/emoji2/emjoymethod";
import "@/components/emoji2/emjoy.css";

export default {
  name: "emoji",
  data() {
    return {
      emojiJson: {},
      // emojisAmap: emojisBmap,//qq表情包
      emojiQQ: [],
      emojiTab:[
        {title:'[微笑]',name:'qq表情包',items:emojisAmap,border:true},
        {title:'[E415]',name:'微信表情包',items:wChatToUi,border:true},
      ],
      emojiTabCurrent:0,
    };
  },
  //
  mounted() {
    console.log(this.emojisAmap);
  },
  methods:{
    chooseEmojiDefault(index){
     let emojiStr = index.indexOf('[') > -1 ? index : '['+index+']'
      this.$emit('chooseEmoji',emojiStr)
    }
  },
  //子模板
  components: {},
};
</script>

<style lang="less" scoped>
// 纵向滚动条
// @mixin scroll-bar($width: 10px) {
//     &::-webkit-scrollbar-track {
//         border-radius: 10px;
//         background-color: #ffffff;
//     }
//     &::-webkit-scrollbar {
//         width: $width;
//         height: 10px;
//         background-color: #ffffff;
//     }
//     &::-webkit-scrollbar-thumb {
//         border-radius: 10px;
//         background-color: rgba(0, 0, 0, 0.2);
//     }
// }

.emoji {
  text-align: left;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);

  .emoji-tabs {
    border-top: 1px solid #dcdfe6;
    background: #f8f8f8;

    .emoji-tab {
      width: 20px;
      height: 100%;
      padding: 5px 20px;
      overflow: hidden;
      display: inline-block;
      text-align: center;
      line-height: 35px;
      font-size: 30px;
      border: 1px solid #ffffff;

      border-right-color: #dcdfe6;
      border-left-color: #dcdfe6;
      box-sizing: content-box;

      &.current {
        background: #ffffff;
      }
    }
  }

  .emoji-default {
    background-color: #fff;
    // width: calc(100% - 40px);
    width: 100%;
    height: 202px;
    overflow-y: auto;
    @include scroll-bar();
    padding: 0px 20px;

    li {
      display: inline-block;
      padding: 5px;
      font-size: 24px;
      width: 45px;
      height: 45px;
      line-height: 45px;
      overflow: hidden;
      cursor: pointer;
    }

    li:hover {
      background-color: #d5d5d5;
    }
  }
}
</style>